<template>
  <el-container>
    <div style="
        background-color: #fff;
        margin: 20px 0 ;
        box-shadow: 10px 10px 18px 0 rgba(0, 0, 0, 0.12);
        border-radius: 3px;
      ">
      <el-row style="margin: 1% auto; font-size: 20px; text-align: center">业务接件</el-row>
      <el-form :model="temp_bussi" ref="temp_bussi" :inline="true" style="margin: 1% auto; text-align: center"
        label-width="200px">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="业务编号" prop="applyCode">
              <el-input v-model="temp_bussi.applyCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="申请人" prop="name">
              <el-input v-model="temp_bussi.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="证件号" prop="idCard">
              <el-input v-model="temp_bussi.idCard"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="乡镇街道" v-if="townState" prop="townCode">
              <el-select v-model="temp_bussi.townCode" placeholder="请选择乡镇街道" @change="townChange">
                <el-option label="请选择乡镇街道" value></el-option>
                <el-option v-for="item in temp_bussi.townList" :key="item.code" :label="item.name" :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="村组社区" prop="villageCode">
              <el-select v-model="temp_bussi.villageCode" placeholder="请选择村组社区">
                <el-option label="请选择村组社区" value></el-option>
                <el-option v-for="item in temp_bussi.villageList" :key="item.code" :label="item.name"
                  :value="item.code"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" style="padding-left: 70px">
            <el-form-item>
              <el-button type="success" @click="dialogVisible = true">接件</el-button>
              <el-button type="primary" @click="submitForm('temp_bussi')">搜索</el-button>
              <el-button @click="resetForm('temp_bussi')">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-card style="margin-top:10px width:100%;box-shadow: 10px 10px 18px 0 rgba(0,0,0,.12);">
      <el-table v-loading :data="tempTableData.data" style="width: 100%" @selection-change="handleSelectionChange"
        @row-dblclick="createPro" :row-class-name="tableRowClassName"
        :default-sort="{ prop: 'maxTime', order: 'ascending' }">
        <el-table-column prop="applyCode" label="业务编号" align="center" min-width="10%" sortable></el-table-column>
        <el-table-column prop="name" label="申请人" width="100%" align="center" min-width="12%"></el-table-column>
        <el-table-column prop="idCard" label="证件号" align="center" min-width="12%"></el-table-column>
        <el-table-column prop="townName" label="乡镇街道" align="center" min-width="12%"></el-table-column>
        <el-table-column prop="villageName" label="村组社区" align="center" min-width="12%"></el-table-column>
        <el-table-column prop="lastTime" label="提交时间" align="center" min-width="12%" sortable></el-table-column>
        <el-table-column prop="operation" label="操作" align="center" width="300">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" type="primary">编辑</el-button>
            <el-button size="mini" @click="deleteApply(scope.$index, scope.row)">删除</el-button>
            <el-button size="mini" @click="handleEditFile(scope.$index, scope.row)">查看告知书</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination @size-change="changePageSize" @current-change="changeCurrentPage" @prev-click="prevPage"
          @next-click="nextPage" :current-page="tempTableData.currentPage" :page-sizes="[5, 10, 15, 20]"
          :page-size="tempTableData.pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="tempTableData.total"></el-pagination>
      </div>
    </el-card>
    <el-footer style="margin-top:10px width:100%"></el-footer>
    <el-dialog title="请选择建房类型" :visible.sync="dialogVisible" width="36%" center>
      <span style="text-aglin: center">
        <el-button type="primary" v-model="newBuild" @click="addNewPro" :disabled="isDisable" plain
          style="width: 23%; font-size: 20px">异址新建</el-button>
        <el-button type="primary" v-model="expandBuild" @click="expandBuildClick" plain
          style="width: 23%; font-size: 20px">改扩建</el-button>
        <el-button type="primary" v-model="changeBuild" @click="changeBuildClick" plain
          style="width: 23%; font-size: 20px">原址翻建</el-button>

        <el-button type="primary" v-model="otherBuild" @click="otherBuildClick" plain
          style="width: 23%; font-size: 20px">其他类型</el-button>
        <br />
        <br />
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
  import {
    //getBussiListApi,
    getBnBasicInfoListApi,
    deleteApplyApi,
  } from "@/api/applyApi";
  //查看告知书
  import {
    lookTellBook
  } from "@/api/documentApi";
  import {
    getChildrenAddress
  } from "@/api/addressDictionary";
  import store from "@/vuex/store";
  import config from "@/config/config";
  export default {
    data() {
      return {
        isDisable: false,
        changeBuild: "1", //改建
        expandBuild: "2", //扩建
        newBuild: "3", //新建
        otherBuild: "4", //其他要件
        dialogVisible: false,
        townState: false,
        type: "1", //业务类型
        resultData: {
          docName: "",
          id: "",
          state: "",
          uploadTime: "",
          url: "",
        },
        currentCode: store.getters.currentCode,
        temp_bussi: {
          //id: "",
          applyCode: "",
          region: "",
          idCard: "",
          address: "",
          name: "",
          townList: [{
            name: "",
            code: ""
          }],
          villageList: [{
            name: "",
            code: ""
          }],
          townCode: "",
          villageCode: "",
          currentPage: 1,
          pageSize: 5,
          total: 0,
        },
        tableData: {
          data: [{
            bussi_name: "",
            type: "",
            description: "",
          }, ],
        },
        tempTableData: {
          //表格data
          data: [{
            name: "",
            id: "",
            idcard: "",
            address: "",
            czsq: "",
            state: "",
          }, ],
          currentPage: 1,
          pageSize: 5,
          total: 0,
          type: 0,
        },
      };
    },
    created: function () {
      this.showTown();
      this.getBnBasicInfoList();
      getChildrenAddress(this.currentCode).then((townList) => {
        if (this.currentCode.length > 9) {
          this.temp_bussi.townList = townList.data.data;
        } else {
          this.temp_bussi.villageList = townList.data.data;
        }
      });
    },
    methods: {
      tableRowClassName({
        row,
        rowIndex
      }) {
        if (row.maxTime < row.warningTime && row.maxTime > row.expireTime) {
          return "success-row"; //警告背景
        } else if (row.maxTime < row.expireTime) {
          return "warning-row"; //到期背景
        } else {
          return "";
        }
      },
      handleClose(done) {
        this.$confirm("确认关闭？")
          .then((_) => {
            done();
          })
          .catch((_) => {});
      },
      //改变乡镇
      townChange(index) {
        if (this.temp_bussi.townCode) {
          getChildrenAddress(this.temp_bussi.townCode).then((villageList) => {
            this.temp_bussi.villageList = villageList.data.data;
          });
        }
      },
      handleEdit(index, row) {
        this.createPro(row, index);
      },
      //改扩建
      expandBuildClick(index, row) {
        row = {
          id: 0
        };
        row.townList = this.temp_bussi.townList;
        row.villageList = this.temp_bussi.villageList;
        row.villageCode = this.villageCode;
        row.active = 0;
        row.buildingType = this.expandBuild;
        row.typeName = "扩建录入";
        this.$router.push({
          path: "./newBuild",
          query: row,
        });
      },
      //  原址翻建
      changeBuildClick(index, row) {
        row = {
          id: 0
        };
        row.townList = this.temp_bussi.townList;
        row.villageList = this.temp_bussi.villageList;
        row.villageCode = this.villageCode;
        row.active = 0;
        row.buildingType = this.changeBuild;
        this.$router.push({
          path: "./newBuild",
          query: row,
        });
      },
      otherBuildClick(index, row) {
        row = {
          id: 0
        };
        row.townList = this.temp_bussi.townList;
        row.villageList = this.temp_bussi.villageList;
        row.villageCode = this.villageCode;
        row.active = 0;
        row.buildingType = this.otherBuild;

        this.$router.push({
          path: "./newBuild",
          query: row,
        });
      },
      addNewPro(index, row) {
        // //默认设置为0，后台做处理
        row = {
          id: 0
        };
        row.townList = this.temp_bussi.townList;
        row.villageList = this.temp_bussi.villageList;
        row.villageCode = this.villageCode;
        row.active = 0;
        row.buildingType = this.newBuild;
        this.$router.push({
          path: "./newBuild",
          query: row,
        });
      },
      //删除
      deleteApply(index, row) {
        this.$confirm("此操作将永久删除该业务, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            deleteApplyApi(row.id).then((response) => {
              this.$message({
                showClose: true,
                message: "删除成功",
                type: "success",
              });
              this.getBnBasicInfoList();
            });
            //页面刷新
            //this.getBussiList();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      getBnBasicInfoList() {
        this.tableLoding = true;
        getBnBasicInfoListApi(this.temp_bussi)
          .then((response) => {
            this.tempTableData.data = response.data.data.items;
            this.tempTableData.total = response.data.data.total;
            this.tableLoding = false;
          })
          .catch((error) => {
            this.$message({
              showClose: true,
              message: error,
              type: "error",
            });
            this.tableLoding = false;
          });
      },
      //提交搜索
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            getBnBasicInfoListApi(this.temp_bussi)
              .then((response) => {
                this.tempTableData.data = response.data.data.items;
                this.tempTableData.total = response.data.data.total;
                this.tableLoding = false;
                this.$message({
                  showClose: true,
                  message: "搜索成功",
                  type: "success",
                });
              })
              .catch((error) => {
                this.$message({
                  showClose: true,
                  message: error.data.respondMessage,
                  type: "error",
                });
              });
          } else {
            return false;
          }
        });
      },
      // 清空表单选项
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.$refs[formName].validate((valid) => {
          if (valid) {
            getBnBasicInfoListApi(this.temp_bussi)
              .then((response) => {
                this.tempTableData.data = response.data.data.items;
                this.tempTableData.total = response.data.data.total;
                this.tableLoding = false;
                this.$message({
                  showClose: true,
                  message: "重置成功",
                  type: "success",
                });
                //this.resetForm(formName);
              })
              .catch((error) => {
                this.$message({
                  showClose: true,
                  message: error.data.respondMessage,
                  type: "error",
                });
              });
          } else {
            return false;
          }
        });
      },
      createPro(row) {
        row.active = 0;
        row.townList = this.temp_bussi.townList;
        getChildrenAddress(row.townCode).then((villageList) => {
          row.villageList = villageList.data.data;
          this.$router.push({
            path: "./newBuild",
            query: row,
          });
        });
      },
      changePageSize(val) {
        //this.tableData.pageSize = val;
        this.temp_bussi.pageSize = val;
        this.getBnBasicInfoList();
      },
      changeCurrentPage(val) {
        this.temp_bussi.currentPage = val;
        this.getBnBasicInfoList();
      },
      prevPage(val) {
        this.temp_bussi.currentPage = val;
        this.getBnBasicInfoList();
      },
      nextPage(val) {
        this.temp_bussi.currentPage = val;
        this.getBnBasicInfoList();
      },
      handleSelectionChange(val) {
        this.changeRow = val;
      },
      selectable(row, index) {
        if (row.show == 0) {
          return false;
        } else {
          return true;
        }
      },

      //表格的序号
      indexMethod(index) {
        return index + 1;
      },
      handleEditFile(index, row) {
        lookTellBook(row.applyCode).then((data) => {
          if (data.data.data.items.url) {
            var previewUrl = data.data.data.items.url.split(":");
            var url = config.baseUrl + previewUrl[1];
            if (/\.(jpe?g|png|gif)$/i.test(data.data.data.items.url)) {
              this.url = url;
              this.srcList = url;
              this.centerDialogVisible = true;
            } else {
              window.open(url, "_blank");
            }
          } else {
            this.$message({
              showClose: true,
              message: "暂无告知书",
              type: "error",
            });
          }
        });
      },
      //状态
      showChangeData: function (row, column) {
        return row.state == "1" ?
          "收件" :
          row.state == "2" ?
          "资料审查" :
          row.state == "3" ?
          "规划许可" :
          row.state == "4" ?
          "施工管理" :
          row.state == "5" ?
          "竣工验收" :
          row.state == "6" ?
          "归档" :
          "未知";
      }, //控制显示乡镇街道显示状态
      showTown() {
        if (this.currentCode.length > 9) {
          this.townState = true;
        } else {
          this.temp_bussi.townCode = this.currentCode;
          this.townState = false;
        }
      },
      formatMaxTime(row) {
        if (row.maxTime < 0) {
          return "已超时" + (row.maxTime - 2 * row.maxTime) + "天";
        }
        if (row.maxTime == 0) {
          return "今日最后一天";
        }
        if (row.maxTime > 0) {
          return row.maxTime + "天";
        }
      },
    },
  };
</script>

<style>
  .container {
    font-size: 20px;
  }
</style>